<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI新闻播报站</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <!-- 背景动效 -->
        <div class="background-animation">
            <div class="floating-orb orb-1"></div>
            <div class="floating-orb orb-2"></div>
            <div class="floating-orb orb-3"></div>
        </div>

        <!-- 头部 -->
        <header class="header">
            <div class="logo">
                <i class="fas fa-broadcast-tower"></i>
                <h1>AI新闻播报站</h1>
            </div>
            <p class="subtitle">智能新闻分析，实时内容播报</p>
        </header>

        <!-- 主要内容区 -->
        <main class="main-content">
            <!-- 输入区域 -->
            <div class="input-section">
                <div class="input-container">
                    <div class="input-wrapper">
                        <i class="fas fa-link input-icon"></i>
                        <input 
                            type="url" 
                            id="newsUrl" 
                            placeholder="请输入新闻网站网址..."
                            class="url-input"
                            value="https://news.sina.com.cn"
                        >
                    </div>
                    <button id="fetchNewsBtn" class="fetch-button">
                        <span class="button-text">
                            <i class="fas fa-microphone"></i>
                            收取播报
                        </span>
                        <div class="button-ripple"></div>
                    </button>
                </div>
            </div>

            <!-- 结果展示区 -->
            <div class="result-section" id="resultSection">
                <!-- Loading动效 -->
                <div class="loading-container" id="loadingContainer" style="display: none;">
                    <div class="loading-animation">
                        <div class="news-wave">
                            <div class="wave-dot"></div>
                            <div class="wave-dot"></div>
                            <div class="wave-dot"></div>
                            <div class="wave-dot"></div>
                            <div class="wave-dot"></div>
                        </div>
                        <p class="loading-text">AI正在分析新闻内容...</p>
                        <div class="loading-progress">
                            <div class="progress-bar"></div>
                        </div>
                    </div>
                </div>

                <!-- 新闻内容展示 -->
                <div class="news-content" id="newsContent" style="display: none;">
                    <div class="news-header">
                        <i class="fas fa-newspaper"></i>
                        <h2>新闻播报</h2>
                        <div class="news-meta">
                            <span class="timestamp" id="timestamp"></span>
                            <span class="source" id="newsSource"></span>
                        </div>
                    </div>
                    <div class="news-body">
                        <div class="news-text" id="newsText"></div>
                    </div>
                    <div class="news-footer">
                        <div class="usage-info" id="usageInfo">
                            <div class="usage-item">
                                <i class="fas fa-tokens"></i>
                                <span>Tokens: <span id="totalTokens">-</span></span>
                            </div>
                            <div class="usage-item">
                                <i class="fas fa-clock"></i>
                                <span>耗时: <span id="responseTime">-</span>s</span>
                            </div>
                        </div>
                        <button class="retry-button" id="retryBtn">
                            <i class="fas fa-redo"></i>
                            重新播报
                        </button>
                    </div>
                </div>

                <!-- 错误提示 -->
                <div class="error-message" id="errorMessage" style="display: none;">
                    <i class="fas fa-exclamation-triangle"></i>
                    <p>获取新闻失败，请稍后重试</p>
                </div>
            </div>
        </main>

        <!-- 底部 -->
        <footer class="footer">
            <p>© 2024 AI新闻播报站 - 让新闻更智能</p>
        </footer>
    </div>

    <script src="script.js"></script>
</body>
</html> 